<template>
    <div class="Vip">
        <!-- 用户信息 -->
        <div class="user">
            <!-- 头像 -->
            <div
                class="headPortrait"
                :style="{ backgroundImage: 'url(' + avatarUrl + ')' }"
            ></div>
            <!-- 名字 -->
            <div class="name">{{nickname}}</div>
            <!-- 开通按钮 -->
            <van-button
                round
                block
                type="info"
                native-type="submit"
                color="linear-gradient(135deg ,#5a3be2, #c20ee1)"
                @click="toast"
                >立刻开通 VIP</van-button
            >
        </div>

        <!-- 会员福利 -->
        <div class="Benefits_box">
            <div class="p_box">
                <div class="p1">会员福利</div>

                <!-- 离开 -->
                <div class="p2" @click="out">
                    打扰了 <van-icon name="minus" /><van-icon
                        name="arrow"
                        class="hhh"
                    />
                </div>
            </div>

            <!-- 装饰皮 -->
            <div
                class="Benefits"
                v-for="(item, index) in Benefits"
                :key="index"
            >
                <div class="element" v-for="(v, i) in item" :key="i">
                    <img :src="v.img" alt="" />
                    <div class="text">{{ v.text }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
const {
    mapState: AccountMapState,
    mapMutations: AccountMapMutations,
    mapGetters: AccountMapGetters,
    mapActions: AccountMapActions
} = createNamespacedHelpers('Account');

import { Toast } from 'vant';
export default {
    name: "Vip",
    data() {
        return {
         
            Benefits: [
                [
                    { text: '付费音乐', img: require('../assets/vip1.png') },
                    { text: '无损音质', img: require('../assets/vip2.png') },
                    { text: '高品试听', img: require('../assets/vip3.png') },
                ],
                [
                    { text: '会员标志', img: require('../assets/vip4.png') },
                    { text: '演唱门票', img: require('../assets/vip5.png') },
                    { text: '专属福利', img: require('../assets/vip6.png') },
                ],
                [
                    { text: '会员歌单', img: require('../assets/vip7.png') },
                    { text: '会员推荐', img: require('../assets/vip8.png') },
                    { text: '会员视频', img: require('../assets/vip9.png') },
                ],
                [
                    { text: '专属音乐', img: require('../assets/vip10.png') },
                    { text: '会员皮肤', img: require('../assets/vip11.png') },
                    { text: '海量下载', img: require('../assets/vip12.png') }
                ]
            ]
        }
    },

    methods: {
        // 离开
        out() {
            this.VIP_TB_Fn(false);
            this.$router.push({ name: "Home" });
        },
        // 按钮提示
        toast() {
            Toast.fail({
                message: "没有接口！\n将来开发！",
                forbidClick: true
            });
        },
        ...mapMutations({
            // 控制 标签栏位置开关
            VIP_TB_Fn(commit, tf) {
                commit('VIP_TB_Fn', tf);
            },
        }),
    },
    computed: {
        ...AccountMapState(['avatarUrl','nickname','level']),
    },
    created() {
        this.VIP_TB_Fn(true);
    }
}
</script>

<style lang="less" scoped>
.Vip {
    color: #e0e0e0;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #0c0a31;

    // 用户信息
    .user {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        width: 33.333%;
        margin: 20px auto 40px;

        // 头像
        .headPortrait {
            width: 60%;
            margin-bottom: 15px;
            height: 0;
            padding-bottom: 60%;
            background-image: url('../assets/tx.png');
            background-position: center center;
            background-size: cover;
            border-radius: 50%;
        }
        // 名字
        .name {
            font-weight: 500;
            font-size: 15px;
            letter-spacing: 1px;
            margin-bottom: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-break: break-all;
        }

        // 按钮
        button {
            width: 88%;
            height: 35px;
            font-size: 12px;
            letter-spacing: 1px;
            border-radius: 10px;
        }
    }

    // 会员福利
    .Benefits_box {
        margin: 0 40px;

        // 标题
        .p_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;

            .p1 {
                letter-spacing: 2px;
                font-size: 22px;
            }
            .p2 {
                color: rgba(255, 255, 255, 0.4);
                .hhh {
                    transform: translateX(-8px);
                }
            }
        }

        // 装饰皮
        .Benefits {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .element {
                display: flex;
                flex-flow: column;
                align-items: center;
                margin-bottom: 26px;

                img {
                    width: 55%;
                    height: auto;
                    margin-bottom: 15px;
                }
                .text {
                    color: rgba(255, 255, 255, 0.75);
                }
            }
        }
    }
}
</style>